<template>
    <div style="width:100%;height:100%;" :id="idName"></div>
</template>

<script>
import echarts from 'echarts';

export default {
    name: 'dataSourcePie',
    props:{
    	option:Object,
    	idName:'',
    },
    data () {
        return {
            //
        };
    },
    mounted () {
        this.$nextTick(() => {
            var dataSourcePie = echarts.init(document.getElementById(this.idName));
            dataSourcePie.setOption(this.option);
            window.addEventListener('resize', function () {
                dataSourcePie.resize();
            });
          dataSourcePie.on('click', this.cevent);
        });
    },
    methods:{
    	cevent(param){
    		this.$emit('clickEcharts',param);
    	}
    },
    watch:{
        	option:{/*深度检测这个对象的变化*/
        		 handler(newVal, oldVal){
//      		 	alert("dwa");
        		    this.$nextTick(() => {
			            var dataSourcePie = echarts.init(document.getElementById(this.idName));
			            dataSourcePie.setOption(newVal);
			            window.addEventListener('resize', function () {
			                dataSourcePie.resize();
			            });
			        });
            	},
            	deep:true
        	}
    }
    
};
</script>
